<template>
    <div class="ys-card">
      <el-card class="box-card">
        <template #header>
          <!-- 我自己内置一个具名插槽,可以由外部传入组件,如果不传就默认显示header -->
          <slot name="header">
            <div class="card-header">
              <span class="title-header">{{ title }}</span>
            </div>
          </slot>
        </template>
        <div class="item">
          <slot></slot>
        </div>
      </el-card>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue'
  
  export default defineComponent({
    props: {
      //props中的属性可以直接在mastache中使用
      title: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      return {}
    }
  })
  </script>
  
  <style scoped>
  .card-header {
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .title-header {
    margin-left: 20px;
  }
  </style>
  